<template>
    <div class="summer-container">
        <el-dialog
            :title="$t('register.summer.is')"
            :visible="visibleSummer"
            width="700px"
            @close="()=>{$store.commit('setVisibleSummer',false)}">
            <!-- <div v-if="ifSummerTime&&checkVisible"> -->
            <div>
                <!--夏令时按星期-->
                <div class="marginbottom_10">
                    <span class="label-inline">{{$t('index.type')}}</span>
                    <el-select v-model="summerType" filterable :placeholder="$t('pleaseSelect')" @change="changeSummerType">
                        <el-option v-for="item in summerTimeData.SUMMER_TYPE" :key="item.value" :label="item.code" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <el-form class="form" ref="summer_form1" :model="summer_form1" label-width="10" v-if="summerType=='1'">
                    <el-row :gutter="24">
                        <el-col :span="24" class="label">
                            <span>{{$t('index.startTime')}}</span>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="start_summerMonth" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                <el-select v-model="summer_form1.start_summerMonth" filterable :placeholder="$t('month')">
                                    <el-option v-for="item in summerTimeData.MONTH" :key="item.value" :label="item.code" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="start_summerSort" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                <el-select v-model="summer_form1.start_summerSort" filterable :placeholder="$t('site.sort')">
                                    <el-option v-for="item in summerTimeData.SORT_TYPE" :key="item.value" :label="item.code" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item prop="start_summerNum" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                <el-select v-model="summer_form1.start_summerNum" filterable :placeholder="$t('site.week_num')">
                                    <el-option v-for="item in summerTimeData.NOWEEK" :key="item.value" :label="item.code" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="start_summerWeek" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                <el-select v-model="summer_form1.start_summerWeek" filterable :placeholder="$t('week')">
                                    <el-option v-for="item in summerTimeData.WEEK" :key="item.value" :label="item.code" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                            <el-col :span="24">
                                <el-form-item prop="start_summer_hour" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                <el-time-picker
                                    v-model="summer_form1.start_summer_hour"
                                    format="HH:mm"
                                    value-format="HH:mm"
                                    placeholder="00:00">
                                </el-time-picker>
                                </el-form-item>
                            </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="24" class="label">
                            <span>{{$t('index.endTime')}}</span>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="end_summerMonth" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                <el-select v-model="summer_form1.end_summerMonth" filterable :placeholder="$t('month')">
                                    <el-option v-for="item in summerTimeData.MONTH" :key="item.value" :label="item.code" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="end_summerSort" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                <el-select v-model="summer_form1.end_summerSort" filterable :placeholder="$t('site.sort')">
                                    <el-option v-for="item in summerTimeData.SORT_TYPE" :key="item.value" :label="item.code" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item prop="end_summerNum" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                <el-select v-model="summer_form1.end_summerNum" filterable :placeholder="$t('site.week_num')">
                                    <el-option v-for="item in summerTimeData.NOWEEK" :key="item.value" :label="item.code" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="end_summerWeek" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                <el-select v-model="summer_form1.end_summerWeek" filterable :placeholder="$t('week')">
                                    <el-option v-for="item in summerTimeData.WEEK" :key="item.value" :label="item.code" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                            <el-col :span="24">
                            <el-form-item prop="end_summer_hour" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                <el-time-picker 
                                    v-model="summer_form1.end_summer_hour" 
                                    format="HH:mm" 
                                    value-format="HH:mm" 
                                    placeholder="00:00">
                                </el-time-picker>
                            </el-form-item>
                            </el-col>
                    </el-row>
                </el-form>
                <!--夏令时按日期-->
                <el-form class="form" ref="summer_form2" :model="summer_form2" label-width="0" v-if="summerType=='2'">
                    <el-row :gutter="24">
                        <el-col :span="24" class="label">
                            <span>{{$t('index.startTime')}}</span>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="start_month" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                <el-date-picker 
                                    v-model="summer_form2.start_month" 
                                    type="date" 
                                    format="MM-dd"
                                    value-format="MM-dd"
                                    placeholder="01-01">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="start_hour" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                <el-time-picker 
                                    v-model="summer_form2.start_hour" 
                                    format="HH:mm" 
                                    value-format="HH:mm"
                                    placeholder="00:00">
                                </el-time-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="24" class="label">
                            <span>{{$t('index.endTime')}}</span>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="end_month" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                <el-date-picker 
                                    v-model="summer_form2.end_month" 
                                    format="MM-dd"
                                    value-format="MM-dd"
                                    placeholder="01-01">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="end_hour" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                <el-time-picker 
                                    v-model="summer_form2.end_hour" 
                                    format="HH:mm" 
                                    value-format="HH:mm"
                                    placeholder="00:00">
                                </el-time-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleSummer',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save()">{{$t('save')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script scoped>
export default {
    data(){
        return {
            summerTimeData:{
                SUMMER_TYPE:[],
                MONTH:[],
                SORT_TYPE:[],
                WEEK:[],
                NOWEEK:[],
            },//夏令时
            selectCityData:[],
            selectCountyData:[],
            selectTownData:[],
            summer_form1:{
                start_summerMonth:'',
                start_summerSort:'',
                start_summerNum:'',
                start_summerWeek:'',
                start_summer_hour:'00:00',
                end_summerMonth:'',
                end_summerSort:'',
                end_summerNum:'',
                end_summerWeek:'',
                end_summer_hour:'00:00',
            },
            summer_form2:{
                start_month:'',
                start_hour:'00:00',
                end_month:'',
                end_hour:'00:00'
            },
            summerType:'1',
            form:{
                summerStartTime:'',
                summerEndTime:''
            }
        }
    },
    watch:{

    },
    computed: {
        visibleSummer(){
            return this.$store.state.sysStore.visibleSummer
        }
    },
    mounted(){
        this.getDictionaryBatch()
    },
    methods:{
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'CHINA_DES,SUMMER_TYPE,MONTH,SORT_TYPE,WEEK,NOWEEK',
                lang:localStorage.getItem('lang')
            })
            this.summerTimeData=res
        },
        changeSummerType(val){
            if(val=='1') this.$refs['summer_form2'].resetFields();
            if(val=='2') this.$refs['summer_form1'].resetFields();
        },
        save(){
            if(this.summerType=='1'){
                this.$refs['summer_form1'].validate((valid2) => {
                    if(valid2){
                        let sort_start=this.summer_form1.start_summerSort==1?'':'-'
                        this.form.summerStartTime=this.summer_form1.start_summerMonth+';'+sort_start+this.summer_form1.start_summerNum+';'+this.summer_form1.start_summerWeek+';'+this.summer_form1.start_summer_hour
                        let sort_end=this.summer_form1.end_summerSort==1?'':'-'
                        this.form.summerEndTime=this.summer_form1.end_summerMonth+';'+sort_end+this.summer_form1.end_summerNum+';'+this.summer_form1.end_summerWeek+';'+this.summer_form1.end_summer_hour
                        this.$emit('getSummer',this.form)
                        this.$store.commit('setVisibleSummer',false)
                    }else{
                        return false
                    }
                })
            }else{
                this.$refs['summer_form2'].validate((valid2) => {
                    if(valid2){
                        this.form.summerStartTime=this.summer_form2.start_month+' '+this.summer_form2.start_hour
                        this.form.summerEndTime=this.summer_form2.end_month+' '+this.summer_form2.end_hour
                        this.$emit('getSummer',this.form)
                        this.$store.commit('setVisibleSummer',false)
                    }else{
                        return false
                    }
                })
            }
        }
    }
}
</script>

<style lang="less">
@color_box_bg:#EFEFEF;
@color_title:#444;
@color_text:#636162;
@color_unit:#636162;
@color_light:#ff8920;
@border_bottom:1px dashed #D1D1D1;
@border_radius:3px;
@color_unit:#8a8a8a;
.summer-container{
   .label-inline{
       line-height: 30px;
       padding-right: 10px;
   }
   .el-dialog__wrapper .el-dialog .el-dialog__body{
       width: 500px;
       margin: 0 auto;
   }
}
</style>